<script setup lang="ts">
import { ref } from 'vue';
import { KeyValues } from '../../utils/types';
import { createRequiredRule } from '../../utils';
import { FormInstance } from 'element-plus';

const props = defineProps<{
  row: any
}>()

const emit = defineEmits(['close', 'submitted'])

const close = () => emit('close')

const formRef = ref<FormInstance>()

const submit = async () => {
  await formRef.value.validate()
  emit('submitted')
}

const versions = ref([
  { id: 1, name: 'V1' },
  { id: 2, name: 'V2' }
])

const form = ref<KeyValues>({})

const rules = {
  versionId: createRequiredRule('请选择历史版本号')
}
</script>

<template>
  <ElDialog title="历史版本">
    <ElForm ref="formRef" :model="form" :rules="rules">
      <ElFormItem prop="versionId">
        <ElSelect placeholder="请选择要切换的历史版本" v-model="form.versionId">
          <ElOption v-for="_ in versions" :key="_.id" :value="_.id" :label="_.name" />
        </ElSelect>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="close">取消</ElButton>
      <ElButton type="primary" @click="submit">确定</ElButton>
    </template>
  </ElDialog>
</template>
